<script lang="ts">
    import { onMount } from 'svelte';
    import { Link } from 'svelte-routing';
    import { get } from '../../utils/api';
    import { addToast } from '../../stores/toastStore';
    import Header from '../../components/Header.svelte';
    import Footer from '../../components/Footer.svelte';

    let loading = true; // 加载中
    let user = []
    async function showProfile() {
        try {
            const response = await get('/auth/profile');
            user = response.data;
        } catch (error) {
            addToast('数据加载失败'+error, 'error', 3000);
        }
    }

    onMount(() => {
        try {
            showProfile();
        } catch (err) {
        } finally {
            loading = false;
        }
    });
</script>

<main>
  <Header title="我的" />

  <div class="bg-white mt-4 mx-4 p-4 rounded-xl flex items-center justify-between shadow">
    <div class="flex items-center">
      <div class="bg-gray-200 h-16 w-16 rounded-full flex items-center justify-center">
        <svg class="h-10 w-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zM12 14a7 7 0 017 7H5a7 7 0 017-7z"/>
        </svg>
      </div>
      <div class="ml-4">
        <div class="text-lg font-semibold">{user.username}</div>
        <div class="text-gray-500">{user.phone}</div>
      </div>
    </div>
    <!-- <button class="text-blue-500 font-semibold">切换身份</button> -->
  </div>

  <div class="bg-white mt-4 mx-4 p-4 rounded-lg shadow">
    <div class="flex items-center">
      <svg class="h-10 w-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14a7 7 0 017 7H5a7 7 0 017-7zm7-11a4 4 0 11-8 0 4 4 0 018 0zM6 9a6 6 0 016-6 6 6 0 016 6v1h-5.5V7h-1v3H6V9z" />
      </svg>
      <div class="ml-4">
        <div class="font-semibold">客户部-冯莎莎</div>
        <div class="text-blue-500">15864111498</div>
      </div>
    </div>
  </div>

  <div class="bg-gray-100 mt-4 mx-4 p-4 rounded-lg shadow">
    <div class="flex justify-around text-gray-700 text-sm">
      <Link to="/item-sendbacks" class="flex-1 text-center">回寄记录</Link>
      <Link to="/key-deliveries" class="flex-1 text-center">寄钥匙记录</Link>
      <Link to="/key-duplications" class="flex-1 text-center">配钥匙记录</Link>
      <Link to="/vehicle-repairs" class="flex-1 text-center">维修记录</Link>
    </div>
  </div>

  <div class="bg-white mt-4 mx-4 p-4 rounded-lg shadow">
    <Link to="/logistics-inquiries" class="flex justify-between items-center py-2 border-b">
      <div>物流询价记录</div>
      <div>&gt;</div>
    </Link>
    <Link to="/about" class="flex justify-between items-center py-2 border-b">
      <div>关于我们</div>
      <div>&gt;</div>
    </Link>
    <Link to="/setting" class="flex justify-between items-center py-2">
      <div>设置</div>
      <div>&gt;</div>
    </Link>
  </div>

  <Footer />
</main>

<style lang="scss">
  
</style>
